<template>
  <el-card>
    <div slot="header">
      <el-button @click="dialogVisible = true">添加</el-button>
    </div>
    <!-- 资源分类列表 -->
    <el-table
      :data="resourceCategory"
      style="width: 100%">
      <el-table-column
        label="日期"
        width="180"
        type="index">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="createdTime"
        label="创建时间">
      </el-table-column>
      <el-table-column
        prop="sort"
        label="排序">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleEditResource(scope.row)"
          >编辑</el-button>
          <el-button
            type="text"
            @click="handleDeleteResource(scope.row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加，编辑弹框 -->
    <el-dialog
      title="添加资源"
      :visible.sync="dialogVisible"
      width="40%">
      <el-form
        :model="category"
        label-width="80px">
        <el-form-item label="名称">
          <el-input
            v-model="category.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input
            v-model="category.sort"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="handleSaveResourse()">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  getResourceCategory,
  saveOrUpdateCategory,
  deleteCategory
} from '@/services/resources'
export default {
  data () {
    return {
      resourceCategory: [],
      dialogVisible: false,
      category: {
        name: '',
        sort: 0
      }
    }
  },
  created () {
    this.loadResourceCategory()
  },
  methods: {
    // 加载资源分类列表
    async loadResourceCategory () {
      const { data } = await getResourceCategory()
      if (data.code === '000000') {
        // console.log(data)
        this.resourceCategory = data.data
      }
    },
    // 新增资源分类
    async handleSaveResourse () {
      const { data } = await saveOrUpdateCategory(this.category)
      if (data.code === '000000') {
        this.dialogVisible = false
        // 刷新资源分类列表
        this.loadResourceCategory()
        // 提示添加成功
        this.$message.success('添加资源分类成功！')
      }
    },
    // 编辑资源分类
    handleEditResource (category) {
      this.dialogVisible = true
      this.category = category
    },
    // 删除资源分类
    handleDeleteResource (categoryId) {
      this.$confirm('是否删除该资源分类', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data } = await deleteCategory(categoryId)
        if (data.code === '000000') {
          this.loadResourceCategory()
          this.$message.success('删除资源分类成功！')
        }
      }).catch(() => {
        this.$message.info('取消删除')
      })
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
